<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <span>
          <u-icon
            color="#FFF"
            name="more-dot-fill"
            size="38"
            @tap="selectCondit"
          ></u-icon>
        </span>
      </view>
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->

      <view style="padding: 15rpx 0 8rpx">
        <view id="chartBox" style="width: 100%; height: 600rpx"></view>
      </view>

      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="tabCurrent"
        item-width="33%"
        @change="handleTabChange"
      ></u-tabs>

      <view class="list-wrap">
        <view class="title">
          <view>各月份情况表</view>
          <u-line class="u-line" color="#999"></u-line>
        </view>
        <view v-if="list.length" class="list">
          <view class="list-item" v-for="item of list" :key="item.dMonth">
            <view class="list-item-content">
              <view class="left" style="width: 100%">
                <view class="name">{{ item.dMonth }}</view>
                <view v-if="tabCurrent == 0" style="display: flex">
                  <!-- <view style="margin-right: 15rpx">(订单金额)</view> -->
                  <view class="count-list" style="flex: 1">
                    <view class="count-list-item">
                      <text class="label">本期</text>
                      <text class="value">{{ item.saleMoney }}元</text>
                    </view>
                    <view class="count-list-item">
                      <text class="label">{{ unitTypeDesc }}</text>
                      <text class="value">{{ item.lastMoney }}元</text>
                    </view>
                    <view class="count-list-item">
                      <text class="label">{{ unitTypeName }}</text>
                      <text class="value">
                        <u-icon
                          v-if="item.moneyCount >= 0"
                          name="arrow-upward"
                          color="green"
                        ></u-icon>
                        <u-icon
                          v-else
                          name="arrow-downward"
                          color="red"
                        ></u-icon>
                        {{ item.moneyCount }}
                      </text>
                    </view>
                  </view>
                </view>

                <view v-else-if="tabCurrent == 1" style="display: flex">
                  <!-- <view style="margin-right: 15rpx">(品规数量)</view> -->
                  <view class="count-list" style="flex: 1">
                    <view class="count-list-item">
                      <text class="label">本期</text>
                      <text class="value">{{ item.saleProQty }}</text>
                    </view>
                    <view class="count-list-item">
                      <text class="label">{{ unitTypeDesc }}</text>
                      <text class="value">{{ item.lastProQty }}</text>
                    </view>
                    <view class="count-list-item">
                      <text class="label">{{ unitTypeName }}</text>
                      <text class="value">
                        <u-icon
                          v-if="item.proQtyCount >= 0"
                          name="arrow-upward"
                          color="green"
                        ></u-icon>
                        <u-icon
                          v-else
                          name="arrow-downward"
                          color="red"
                        ></u-icon>
                        {{ item.proQtyCount }}
                      </text>
                    </view>
                  </view>
                </view>

                <view v-else-if="tabCurrent == 2" style="display: flex">
                  <!-- <view style="margin-right: 15rpx">(订货数量)</view> -->
                  <view class="count-list" style="flex: 1">
                    <view class="count-list-item">
                      <text class="label">本期</text>
                      <text class="value">{{ item.saleQty }}</text>
                    </view>
                    <view class="count-list-item">
                      <text class="label">{{ unitTypeDesc }}</text>
                      <text class="value">{{ item.lastQty }}</text>
                    </view>
                    <view class="count-list-item">
                      <text class="label">{{ unitTypeName }}</text>
                      <text class="value">
                        <u-icon
                          v-if="item.proQtyCount >= 0"
                          name="arrow-upward"
                          color="green"
                        ></u-icon>
                        <u-icon
                          v-else
                          name="arrow-downward"
                          color="red"
                        ></u-icon>
                        {{ item.qtyCount }}
                      </text>
                    </view>
                  </view>
                </view>
              </view>
              <!-- <view class="right">
                <u-icon name="arrow-right"></u-icon>
              </view> -->
            </view>
            <u-line class="u-line" color="#999"></u-line>
          </view>
        </view>
        <view v-else style="padding: 20rpx 0">
          <u-empty text="数据为空" mode="list"></u-empty>
        </view>
      </view>

      <u-popup v-model="queryShow" width="80%" mode="right">
        <view class="cearch_title"> 查询条件 </view>
        <u-form
          :model="queryForm"
          label-position="top"
          label-width="auto"
          style="padding: 80rpx 32rpx 160rpx 32rpx"
          ref="uForm"
        >
          <u-form-item label="日期" prop="dateRange">
            <u-input
              v-model="queryForm.rangeDate"
              placeholder="请选择日期区间"
              type="text"
              :disabled="true"
              @click="showDateRange = true"
            ></u-input>
            <u-icon
              :color="$theme.u_type_primary"
              class="i-lay-m"
              name="calendar"
              size="48"
            ></u-icon>
          </u-form-item>

          <u-form-item label="同比环比" prop="dateRange">
            <u-radio-group v-model="queryForm.unitType">
              <u-radio :name="1">同比</u-radio>
              <u-radio :name="2">环比</u-radio>
            </u-radio-group>
          </u-form-item>
        </u-form>
        <view class="submit-btns btn-other-cls">
          <u-button plain class="u-btn" type="primary" @click="resetBtn">
            重置
          </u-button>
          <u-button class="u-btn" type="primary" @click="confirmBtn">
            确定
          </u-button>
        </view>

        <!-- 时间选择器 -->
        <u-calendar
          max-date="2099-12-31"
          v-model="showDateRange"
          mode="range"
          @change="dateChange"
        ></u-calendar>
      </u-popup>
    </view>
  </view>
</template>

<script>
import * as echarts from "echarts";
import statisticsService from "@/service/internal/statistics.service";
import util from "@/common/util";

export default {
  data() {
    let dateObj = new Date();
    let currYear = dateObj.getFullYear();
    let currMonth =
      dateObj.getMonth() + 1 > 10
        ? dateObj.getMonth() + 1
        : `0${dateObj.getMonth() + 1}`;
    let currDate =
      dateObj.getDate() > 10 ? dateObj.getDate() : `0${dateObj.getDate()}`;
    let orderDateBegin = `${currYear}-01-01`;
    let orderDateEnd = `${currYear}-${currMonth}-${currDate}`;

    return {
      lab_style: {
        fontWeight: 500,
        color: this.$theme.u_main_color,
        fontSize: ".75rem",
      },
      iconStyle: {
        color: "#c0c4cc",
      },
      queryForm: {
        rangeDate: `${orderDateBegin}~${orderDateEnd}`,
        orderDateBegin,
        orderDateEnd,
        unitType: 1,
      },
      showDateRange: false,
      // h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
      pointerStyle: {
        marginRight: "5px",
        pointerEvents: "none !important",
      },
      // h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
      queryShow: false,
      tabCurrent: 0,
      tabList: [
        {
          name: "订单金额",
        },
        {
          name: "品规数量",
        },
        {
          name: "订货数量",
        },
      ],
      list: [],
      licNo: "",
    };
  },
  computed: {
    unitTypeDesc() {
      if (this.queryForm.unitType === 1) {
        return "同期";
      } else if (this.queryForm.unitType === 2) {
        return "上期";
      }
    },
    unitTypeName() {
      if (this.queryForm.unitType === 1) {
        return "同比";
      } else if (this.queryForm.unitType === 2) {
        return "环比";
      }
    },
    showKeys() {
      let keys = [];
      switch (this.tabCurrent) {
        case 0:
          // 订单金额
          keys = ["saleMoney", "lastMoney", "moneyCount"];
          break;
        case 1:
          // 品规数量
          keys = ["saleProQty", "lastProQty", "proQtyCount"];
          break;
        case 2:
          // 订货数量
          keys = ["saleQty", "lastQty", "qtyCount"];
          break;
        default:
          break;
      }
      return keys;
    },
  },
  onLoad(option) {
    this.licNo = option.licNo;
    this.loadData(this.queryForm);
  },
  methods: {
    handleTabChange(e) {
      this.tabCurrent = e;
      this.initChart(this.list);
    },
    dateChange(e) {
      this.queryForm.orderDateBegin = e.startDate;
      this.queryForm.orderDateEnd = e.endDate;
      this.queryForm.rangeDate = `${e.startDate}~${e.endDate}`;
    },
    confirmBtn() {
      this.loadData(this.queryForm);
    },
    resetBtn() {
      this.queryForm = {};
    },
    selectCondit() {
      this.queryShow = true;
    },
    loadData(data) {
      this.queryShow = false;
      this.$u.loading("数据查询中...");
      statisticsService
        .selectOrderStatisticsList({
          paras: {
            licNo: this.licNo,
            ...data,
          },
        })
        .then((res) => {
          this.$u.hideLoading();
          if (res.success) {
            this.list = res.data;
            this.initChart(this.list);
          }
        })
        .catch(() => {
          this.$u.hideLoading();
        });
    },
    initChart(data) {
      let columns = [
        {
          key: "saleMoney",
          name: "本期",
          yAxisIndex: 1,
          data: [],
        },
        {
          key: `lastMoney`,
          name: this.unitTypeDesc,
          yAxisIndex: 1,
          data: [],
        },
        {
          key: "moneyCount",
          name: this.unitTypeName,
          data: [],
        },
        {
          key: "saleProQty",
          name: "本期",
          data: [],
        },
        {
          key: "lastProQty",
          name: this.unitTypeDesc,
          data: [],
        },
        {
          key: "proQtyCount",
          name: this.unitTypeName,
          data: [],
        },
        {
          key: "saleQty",
          name: "本期",
          data: [],
        },
        {
          key: "lastQty",
          name: this.unitTypeDesc,
          data: [],
        },
        {
          key: "qtyCount",
          name: this.unitTypeName,
          data: [],
        },
      ];

      columns = columns.filter((item) => this.showKeys.indexOf(item.key) > -1);

      data.forEach((item) => {
        columns.forEach((colItem) => {
          if (Object.keys(item).indexOf(colItem.key) > -1) {
            colItem.data.push(item[colItem.key]);
          }
        });
      });

      let lengendData = columns.map((item) => item.name);
      let xData = data.map((item) => item.dMonth);
      let seriesData = columns.map((item) => {
        item.type = "line";
        return item;
      });

      let chart = echarts.init(document.getElementById("chartBox"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: lengendData,
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "3%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: [
          {
            type: "value",
            name: "数量/" + this.unitTypeName,
          },
          {
            type: "value",
            name: "金额(元)",
          },
        ],
        series: seriesData,
      };

      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.cearch_title {
  background-color: #f3f4f5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}

.list-wrap {
  margin-top: 10rpx;
  .title {
    font-size: 32rpx;
    color: #999;
    line-height: 80rpx;
    // border-bottom: 1rpx solid #999;
  }
}

.list {
  &-item {
    &-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      color: #999;
      .left {
        .name {
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 10rpx;
          color: #333;
        }
      }
      .right {
        .count {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
}

.count-list {
  display: flex;
  flex-wrap: wrap;
  &-item {
    width: 33.3%;
    .value {
      color: #333;
      font-weight: 600;
      padding-left: 10rpx;
    }
  }
}
</style>
